<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/7/24
  Time: 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Logistic Transport Category Flat Bootstrap Responsive Web Template | Contact :: w3layouts</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=" Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>


    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>
    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation,AMap.MouseTool"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
    <script src="${pageContext.request.contextPath}/front/js/publicFunctions.js" type="text/javascript"></script>
    <%--    <script src="${pageContext.request.contextPath}/static/clipboard.js-master/dist/clipboard.js" type="text/javascript"></script>--%>

</head>
<body>
<!-- //header -->
<header id="header" style="z-index: 51" class="pb-2 layui-bg-cyan">
    <div class="mx-auto d-flex pt-3 w-75">
        <!-- top header -->
        <%--        <div class="d-flex pt-3">--%>
        <div id="logo" class="align-self-center">
            <h1>
                <a href="${pageContext.request.contextPath}/index.jsp" style="text-shadow: 2px 2px black">码上物流</a>
            </h1>
        </div>
        <div class="align-self-center ml-5">
            <nav class="nav pt-2">
                <ul class="mt-2">
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Us</a>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/services.html">Services</a>
                    </li>
                    <li class="mr-3 mr-2 p-0">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle">Dropdown<span class="fa fa-angle-down"
                                                                         aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2"/>
                        <ul class="inner-dropdown rounded">
                            <li>
                                <a href="${pageContext.request.contextPath}/front/gallery.html">Our Gallery</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/front/error.html">404 Error Page</a>
                            </li>
                            <li>
                                <a href="#">Add Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/contact.html">Contact</a>
                    </li>
                    <li class="">
                        <a href="#subscribe">关于我们</a>
                    </li>
                </ul>
            </nav>
        </div>
        <%--        登录用户容器--%>
        <div id="userDiv" class="ml-auto top-grid d-flex"></div>
        <div class="d-flex ml-3 pb-2">
            <a href="javascript:void(0)" class="city text-white align-self-end"></a>
            <a href="javascript:void(0)" onclick="detectLocation()"
               class="fa fa-2x fa-location-arrow ml-3 location-icon align-self-end"></a>
        </div>
        <!-- top header -->

    </div>
</header>
<!-- //header -->
<!-- contact -->
<section class="contact p-3">
    <h2 class="heading text-center  mb-4"> 注册 </h2>
    <div class="">
        <div class="d-flex mx-auto w-50">
            <div class="form p-2 mx-auto w-50">
                <h3 class="text-capitalize text-center mb-2">填写用户信息</h3>
                <form method="post" id="registerForm" class="layui-form" lay-filter="registerForm"
                      enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <label for="registName">用户名：</label>
                        <input type="text" class="layui-input" id="registName" name="registName" placeholder="用户名"
                               autocomplete="off" lay-verify="required">
                    </div>
                    <div class="layui-form-item">
                        <label for="phoneNumber">电话号码：</label>
                        <input type="text" class="layui-input" name="phoneNumber" id="phoneNumber" placeholder="电话号码"
                               lay-verify="required">
                    </div>
                    <div class="layui-form-item">
                        <label for="numberCheck">验证码：</label>
                        <div class="d-flex">
                            <input type="text" name="numberCheck" class="layui-input" id="numberCheck"
                                   readonly="readonly" placeholder="验证码" lay-verify="required"/>
                            <button type="button" id="sendCheckNumber" class="btn w-50 btn-success">发送验证码</button>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label for="psw">密码：</label>
                        <input type="password" class="layui-input" id="psw" name="psw" placeholder="设置密码"
                               lay-verify="required" autocomplete="new-password">
                    </div>
                    <div class="layui-form-item">
                        <label for="confirmPsw">确认密码：</label>
                        <input type="password" class="layui-input" id="confirmPsw" name="confirmPsw" placeholder="确认密码"
                               lay-verify="required" autocomplete="new-password">
                    </div>
                    <div class="layui-form-item">
                        <%--                        <a href="javascript:void(0)" class="form-control-file"> </a>--%>
                        <input type="file" id="checkpicture" name="checkpicture">
                        <p><cite class="ml-2 text-primary">请上传高清一寸照用于人脸登录</cite></p>

                    </div>
                    <div class="layui-form-item">
                        <button id="sendInfo" lay-submit lay-filter="sendInfo" class="btn btn-primary w-100">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- //contact -->
<!-- footer-top -->
<section class="footer-top py-5">
    <div class="container">
        <div class="row footer-top-grid">
            <div class="col-sm-6">
                <h3>Contact Us</h3>
                <p>Call us, we are 24/7 Helpline</p>
            </div>
            <div class="col-sm-6 text-sm-right mt-sm-0 mt-3">
                <h3><span class="fa fa-phone" aria-hidden="true"></span> +11 2345 6789</h3>
            </div>
        </div>
    </div>
</section>
<!-- //footer-top -->
<!--footer -->
<div class="footer footer_w3layouts_section_1its py-5" id="subscribe">
    <div class="container pt-sm-4">
        <div class="row footer-grid">
            <div class="col-md-5 footer-grid_section_1its_w3">
                <div class="footer-title">
                    <h3>Who we are</h3>
                </div>
                <div class="footer-text">
                    <p>Curabitur non nulla sit amet nislinit tempus ipsum convallis quis ac lectus. lac inia eget
                        consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum
                        primis tempus.</p>
                    <ul class="social_section_1info">
                        <li><a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-sm-5 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Useful Links</h3>
                </div>
                <ul class="links">
                    <li><a href="about.html">About Our Company</a></li>
                    <li><a href="services.html">Logistics Services</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                    <li><a href="#">Privicy Policy</a></li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-7 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Subscribe</h3>
                </div>
                <div class="footer-text">
                    <p>By subscribing to our mailing list you will get latest news and updates from us.</p>
                    <form action="#" method="post">
                        <input type="email" name="Email" placeholder="Enter your email..." required="">
                        <button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- move top -->
        <div class="move-to-top text-center">
            <a href="#home" class="move-top"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
        </div>
        <!-- //move top -->
        <div class="copyright">
            <p>© 2019 Logistic. All Rights Reserved | Design by <a href="http://w3layouts.com/">W3layouts</a></p>
        </div>
    </div>
</div>
<!-- //footer -->

<script src="${pageContext.request.contextPath}/front/js/fastLogin.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/ipLocation.js" type="text/javascript"></script>

<script>
    $(function () {
        if ("${sessionScope.user.userId}" !== '') {
            loginUser = {};
            loginUser.userId = "${sessionScope.user.userId}";
            loginUser.userName = "${sessionScope.user.userName}";
            loginUser.userFace = "${sessionScope.user.userFace}";
            loginUser.uaerPhone = "${sessionScope.user.userPhone}";
        }
        layui.use(['layer', 'form'], function () {
            layer = layui.layer;
            form = layui.form;
            // 快速登录表单提交监听
            // 密码登录表单提交监听
            form.on('submit(sendInfo)', function (data) {
                console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                var formData = new FormData($("#registerForm")[0]);
                var numberCheck = $("#numberCheck").val();
                $.ajax({
                    url: "/numberCheck",
                    async: true,
                    data: {numberCheck: numberCheck},
                    success: function (result) {
                        if (result === true) {
                            layer.msg("验证码正确");
                            $.ajax({
                                url: "/send",
                                async: true,
                                type: "post",
                                processData: false,
                                contentType: false,
                                data: formData,
                                success: function (result) {
                                    if (result === true) {
                                        layer.msg("注册成功");
                                        setTimeout(function () {
                                            window.location.href = '${pageContext.request.contextPath}/index.jsp';
                                        }, 1000)
                                    } else {
                                        layer.msg("注册失败");
                                    }
                                },
                                error: function () {
                                    alert("异步请求失败");
                                }
                            })
                        } else {
                            layer.msg("验证码错误");
                            $("#numberCheck").val("");
                        }
                    },
                    error: function () {
                        alert("异步请求失败");
                    }
                })

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });

    })


    //发送验证码
    $("#sendCheckNumber").click(function () {
        let phone = $("#phoneNumber").val();
        if (phone.trim() !== '') {
            if (checkPhone()) {
                $("#numberCheck").prop("readonly", false);
                $.ajax({
                    url: "/number",
                    async: true,
                    data: {phone: phone},
                    success: function (result) {
                        if (result === true) {
                            let secound = 60;
                            $('#sendCheckNumber').attr('disabled', true);
                            let sendCheckNumberInterval = setInterval(function () {
                                $('#sendCheckNumber').text(secound + 'S后再次发送');
                                secound--;
                            }, 1000)
                            setTimeout(function () {
                                $('#sendCheckNumber').attr('disabled', false);
                                clearInterval(sendCheckNumberInterval);
                                $('#sendCheckNumber').text('发送验证码');
                            }, (secound + 2) * 1000)
                        } else {
                            layer.msg('获取验证码失败，请稍后再试')
                        }
                    },
                    error: function () {
                        layer.msg("异步请求失败");
                    }
                })
            } else {
                layer.msg("手机号不可用");
            }
        } else {
            layer.msg('请先填写手机号码')
        }

    })

    //用户名证码
    $("#name").blur(function () {
        var name = $("#name").val();
        $.ajax({
            url: "/name",
            async: true,
            data: {name: name},
            success: function (result) {
                if (result == "true") {
                    alert("用户名可用");
                    $("#sendInfo").prop("disable", false);
                } else {
                    alert("用户名不可用");
                    $("#sendInfo").prop("disable", true);
                }
            },
            error: function () {
                alert("异步请求失败");
            }
        })
    })
    //手机验证是否存在用户
    function checkPhone() {
        let flag = false;
        let val = $("#phoneNumber").val();
        if (val.trim() !== '') {
            $.ajax({
                url: "/phone",
                async: false,
                data: {number: val},
                success: function (result) {
                    if (result === true) {
                        $("#sendInfo").prop("disable", false);
                    } else {
                        $("#sendInfo").prop("disable", true);
                    }
                    flag = result;
                },
                error: function () {
                    alert("异步请求失败");
                }
            })
        }
        return flag;

    }

</script>


</body>

</html>